<template>
  <div class="tabs">
    <div class="tabs-list">
      <div
        class="tabs-item cursorP no-select-txt"
        :class="{ active: item.name === value }"
        v-for="(item, index) in option"
        :key="item.name"
        @click="handleClick(item.name)"
      >
        <span>{{ item.label }}</span>
      </div>
    </div>

    <component class="component" :is="tabComponent" />
  </div>
</template>

<script setup lang="ts">
import { TabsType } from "./interface";
interface Emit {
  (event: "tabClick", v: string): void;
}

const props = defineProps<TabsType.Props>();
let emit = defineEmits<Emit>();
const value = useVModel(props, "modelValue");

const tabComponent = computed(() => {
  const com = props.option?.filter((item) => {
    if (item.name === props.modelValue) {
      return item.component;
    }
  });
  return com?.[0]?.component || props.option?.[0]?.component;
});

const handleClick = (v: string) => {
  emit("tabClick", v);
};
</script>

<style scoped lang="less">
@import url("./index.less");
</style>
